import React, { Component } from 'react'
import { nanoid } from 'nanoid'
import { connect } from 'react-redux'
import { addPerson } from '../../redux/actions/person'

class Person extends Component {
  addPerson = () => {
    const name = this.nameRef.value
    const age = this.ageRef.value
    this.props.addPerson({id: nanoid(), name, age})
    this.nameRef.value = ''
    this.ageRef.value = ''
  }

  render() {
    return (
      <div>
        <p>我是Person组件</p>
        <p>Count组件的总和为: {this.props.total}</p>
        <input ref={c => this.nameRef = c} type="text" placeholder="请输入名字" />
        <input ref={c => this.ageRef = c} type="text" placeholder="请输入年龄" />
        <button onClick={this.addPerson}>添加</button>
        <ul>
          {
            this.props.personList.map(item => {
              return <li key={item.id}>名字{item.name} --- 年龄{item.age}</li>
            })
          }
        </ul>
      </div>
    )
  }
}

export default connect(
  state => ({personList: state.personList, total: state.count}),
  {
    addPerson
  }
)(Person)
